<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p ref="p">{{count}}</p>
        <p>
            <button @click="count++">count++</button>
        </p>
        <hr>
        <p>
            {{zhang.name}}----{{zhang.age}}---{{zhang.info.height}}
        </p>
        <p>
            <button @click="zhang.age++">age++</button>
            <br>
            <button @click="zhang.info.height++">height++</button>
            <br>
        </p>
        <p>
            {{age}} ---- {{height}}
        </p>
        <p>
            <button @click="age++">age++</button>
            <button @click="height++">height++</button>
        </p>
    </div>
</body>
<script>
    let { createApp, nextTick } = Vue;
    let { ref, reactive, readonly, computed, watch } = Vue;
    let { shallowRef, shallowReactive } = Vue;
    let { toRef, toRefs } = Vue;

    // toRef()
    // 基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。

    // toRefs()#
    // 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。  (只转化一层,如果存在对象嵌套,子对象不会转化)




    var app = createApp({

        setup(props) {


            let count = ref(100);
            let addCount = () => {
                count.value++;
            }

            // zhang -> proxy对象   (有深层级的监听和转换)
            let zhang = reactive({// 目标对象
                name: "张三",
                age: 18,
                info: {
                    height: 173,
                    weight: 65
                }
            });

            console.log(zhang);  // 代理对象

            // 问题版
            // 代理对象对应键名取值 => 赋值给变量age    => age = 18 (1. app实例不会监听数据改变 重新更新视图  2. 更改age不会影响 zhang.age)
            // var age = zhang.age;  // 丢失响应性

            // 期望 
            // 1. 通过proxy对象(响应对象)得到一个新属性
            // 2. 新属性可以和源proxy对象 对应键名的数据保持一直 =>  新数据更新,源proxy对象对应数据也更新,   源proxy对象更细 => 新数据也会同步更新

            // 方法1: 计算书(ref对象) (麻烦)  => 优化版可以封装  toRef(proxy,key)
            // let age = computed({
            //     get:()=>{
            //         return zhang.age;
            //     },
            //     set(val){
            //         zhang.age = val;
            //     }
            // })

            // 方法2: toRef() 官方已经对方法1进行封装  =>   toRef(proxy,key) => 可以直接返回计算属性(ref对象)
            //       一次只能转化一个
            // let age = toRef(zhang,"age");
            // console.log(age);


            let obj = toRefs(zhang);  // 将zhang属性都转化计算属性  {name:ComputedRef,age:ComputedRef,info:ComputedRef}
            console.log("obj",obj);

            let {name,age,info} = obj;
            console.log(info);


            // let {height,weight} = toRefs(info.value);  // info现在时计算属性 取值 info.value
            let {height,weight} = toRefs(zhang.info);  // 直接取 zhang.info


            // let {name,age,info:{height,weight}} = obj;   //  !!  height 没有用






















            return {
                // 键名: 传递出去的数据名 方法名  计算属性
                count: count,
                addCount,
                zhang,
                age,
                height
            }

        },
        mounted() {
            // console.log("this",this);
        },
        watch: {
            // "zhang":function(){},
            // "zhang.age":function(){},
        },

    })

    app.mount("#app");








</script>

</html>